<template>
	<view class="" v-if="beforeLoading">
		<view class="" style="padding-bottom: 100rpx;">
			<view class="flex align-center justify-around padding-sm bg-gradual-main">
				<view class="bg-white response radius-df padding" >
					<view class="text-blod text-black  flex align-center" v-if="orderInfo.status==1"><text class="cuIcon-time xxl margin-right-sm text-main"></text>售后申请已提交，等待审核中~</view>
					<block v-if="orderInfo.status<8">
						<view class="text-blod text-black ">售后处理中</view>
						<view class=""  v-if="orderInfo.returns">
							<view class="text-sm margin-top-xs" >
								请填写并提交退货物流信息,退货邮寄地址信息如下：
							</view>
							<view class="text-sm margin-top-xs">
								{{orderInfo.returns[0].name}} - {{orderInfo.returns[0].phone}} - {{orderInfo.returns[0].address}}
							</view>
						</view>
						
					</block>
					<block v-if="orderInfo.status==7">
						<view class="text-blod text-black flex align-center">
							<text class="cuIcon-roundcheckfill xxl margin-right-sm text-main"></text>
							审核通过，退款中
						</view>
					</block>
					<block v-if="orderInfo.status==9">
						<view class="text-blod text-black">售后完成</view>
					</block>
					<block v-if="orderInfo.status==11||orderInfo.status==8">
						<view class="text-blod text-black">退款失败，请联系客服处理</view>
					</block>
					<view class="text-sm text-orange" v-if="orderInfo.notes">
						商家备注：{{orderInfo.notes}}
					</view>
					<view class="text-sm text-orange" v-if="orderInfo.statusValue">
						{{orderInfo.statusValue}}
					</view>
				</view>
			</view>
			
			<!-- 退款信息 -->
			<view class="margin-top-sm">
				<view class=" bg-white">
					<view class="padding-sm text-black text-bold">退款信息</view>
					<!-- 商品列表 -->
					<view class="padding-lr-sm">
						<block class="" v-for="(item,index) in orderItems" :key="index">
						<view class="order-goods flex margin-bottom-sm">
							<view class="order-goods-img margin-right ">
								<image :src="item.image.split(',')[0]" mode=""></image>
							</view>
							<view class="flex-four" >
								<view class="mutiple-overflow  text-black text-df" ><text>{{item.productName}}</text></view>
								<view class="flex-sub flex align-center " v-if="item.goodsSkuDesc">
									<view class=""><text class="text-gray" >商品规格：{{item.goodsSkuDesc}}</text></view>
								</view>
								<view class="flex flex-between ">
									<view class="text-df"> <text class="text-price">{{item.price}}</text> </view>
									<view class=""> <text class="text-gray">×{{item.totalprice}}</text> </view>
								</view>
							</view>
						</view>
						</block>
						<view class="padding-tb-sm">
							<view class="flex align-center padding-lr-sm padding-tb-xs">
								<view style="width:70px;" class="text-sm">退款原因</view>
								<view class="flex-sub text-black">{{orderInfo.reason}}</view>
							</view>
							<view class="flex align-center padding-lr-sm padding-tb-xs">
								<view style="width:70px;" class="text-sm">其他说明</view>
								<view class="flex-sub text-black">{{orderInfo.remark||'无'}}</view>
							</view>
							<view class="flex align-center justify-between padding-lr-sm padding-tb-xs">
								<view style="width:70px;" class="text-sm">退款金额</view>
								<view class="flex-sub text-price text-black" >{{orderInfo.price}}</view>
							</view>
							<view class="flex align-center padding-lr-sm padding-tb-xs">
								<view style="width:70px;" class="text-sm">申请时间</view>
								<view class="flex-sub text-black">{{orderInfo.time}}</view>
							</view>
							<view class="flex align-center padding-lr-sm padding-tb-xs">
								<view style="width:70px;" class="text-sm">退款单号</view>
								<view class="flex-sub text-black">{{orderInfo.afterNo}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 物流信息 -->
			<view class="bg-white margin-top-sm" v-if="orderInfo.logistics.length">
				<view class="padding-sm text-black text-bold">退货物流信息</view>
				<view class="padding-lr-sm">
					<view class="flex align-center justify-between padding-lr-sm padding-tb-xs">
						<view style="width:70px;" class="text-black">物流公司</view>
						<view class="flex-sub text-right">{{orderInfo.logistics[0].express}}</view>
					</view>
					<view class="flex justify-between align-center padding-lr-sm padding-tb-xs">
						<view style="width:70px;" class="text-black">物流单号</view>
						<view class="flex-sub text-right">{{orderInfo.logistics[0].expressNum}}</view>
					</view>
				</view>
			</view>	
		</view>
		

		<!-- 底部菜单 -->
		<view class="o-footer flex align-center justify-end" v-if="orderInfo.status==1||(orderInfo.status==2&&orderInfo.afterSaleType!=2&&!orderInfo.consigneeLogisticsNo)">
			<view class="cu-btn line-orange" v-if="orderInfo.status==1" @tap="cancelOrder">取消申请</view>
			<view class="cu-btn bg-gradual-main round" v-if="orderInfo.status==2&&!orderInfo.consigneeLogisticsNo&&orderInfo.afterSaleType!=2" @tap="toggleLogistics">填写物流信息</view>
		</view>
		<!-- <u-modal :value="logisticsShow" title="物流信息" showCancelButton @confirm='submitLogistics' @cancel="logisticsShow=false">
			<view class="slot-content">
				<view class="flex align-center response">
					<view class="text-black margin-right-sm">物流公司：</view>
					<view class="solid-bottom padding-sm">
						<input type="text" v-model="logisticsInfo.expressCompanyName" placeholder="请输入物流公司" style="font-size: 28rpx;">
					</view>
				</view>
				<view class="flex align-center response">
					<view class="text-black margin-right-sm">物流单号：</view>
					<view class="solid-bottom padding-sm">
						<input type="text" v-model="logisticsInfo.logisticsNo" placeholder="请输入物流单号" style="font-size: 28rpx;">
					</view>
				</view>
			</view>
		</u-modal> -->
		<uni-popup class="bg-white" ref="popup" type="center" border-radius="10px 10px 0 0" backgroundColor="white">
			<view class="slot-content bg-white padding" style="border-radius:10rpx 10rpx 0 0;">
				<view class="title text-center text-lg text-bold text-black">
					<text>填写物流信息</text>
				</view>
				<view class="flex align-center response margin-top" @click="logisticsShow=true">
					<view class="text-black margin-right-sm">物流公司：</view>
					<view class="solid-bottom padding-sm">
						<!-- <input type="text" v-model="logisticsInfo.expressCompanyName" placeholder="请输入物流公司" style="font-size: 28rpx;"> -->
						{{logisticsInfo.expressCompanyName||'请选择物流公司'}}
					</view>
				</view>
				<view class="flex align-center response">
					<view class="text-black margin-right-sm">物流单号：</view>
					<view class="solid-bottom padding-sm">
						<input type="text" v-model="logisticsInfo.logisticsNo" placeholder="请输入物流单号" style="font-size: 28rpx;">
					</view>
				</view>
				<view class="flex justify-between align-center margin-top">
					<u-button size="medium" type="primary" shape="square" plain @click="submitLogistics">确定</u-button>
					<u-button size="medium" type="error" shape="square" plain @click="$refs.popup.close()">取消</u-button>
				</view>
			</view>
		</uni-popup>
		<u-select v-model="logisticsShow" :list="list" label-name="name" value-name="code" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				beforeLoading: false,
				waitingForPay: '', //还需支付金额
				orderItems: [],
				orderInfo: {},
				orderId:'',
				code:'',
				orderType:1,//1是普通订单，2是售后订单
				logisticsShow:false,
				refundCause:"",
				logisticsInfo:{
					expressCompanyName:'',
					logisticsNo:''
				},
				list:[],
				sendAddress:{
					ShopName:"",
					ShopPhone:'',
					ShopAddress:''
				}
			};
		},
		methods: {
			getDatas() {
				this.$ajax.aftersaleorderinfo({Id:this.orderId}).then(res => {
					this.orderInfo = res.data;
					this.orderItems = res.data.afterInfos;
					this.beforeLoading = true;
					uni.stopPullDownRefresh()
				})
			},
			getRefundAddress(){
				return
				this.$ajax.getGlobalSetting({GroupName:'订单设置'}).then(res=>{
					res.data.items.map(item=>{
						if(item.key=='ShopName'){
							this.sendAddress.ShopName=item.value
						}
						if(item.key=='ShopPhone'){
							this.sendAddress.ShopPhone=item.value
						}
						if(item.key=='ShopAddress'){
							this.sendAddress.ShopAddress=item.value
						}
					})
				})
			},
			toggleLogistics(){
				// this.logisticsShow=true
				this.$refs.popup.open()
				this.logisticsInfo={
					expressCompanyName:'',
					logisticsNo:''
				}
			},
			submitLogistics(){
				if(!this.logisticsInfo.expressCompanyName||!this.logisticsInfo.logisticsNo){
					this.$apis.msg('请填写正确的物流信息')
					return
				}
				let dataA={
					mold:'0',
					orderNo:this.orderInfo.orderNo,
					productNo:'',
					barcode:'',
					expressId:this.code,
					expressNum:this.logisticsInfo.logisticsNo
				}
				this.$ajax.addlogistics(dataA).then(res => {
					this.$apis.msg('操作成功')
					this.$refs.popup.close()
					this.toggleLogistics()
					this.getDatas()
				})
			},
			// 获取字典给相关
			getdictionary(){
				this.$ajax.getdictionary({Type:'express_type'}).then(res=>{
					this.list=res.data
				})
			},
			//取消申请
			cancelOrder(){
				uni.showModal({
					title: '温馨提示',
					content: '您正在执行取消售后申请操作,取消之后该申请将会关闭,确认继续吗？',
					success: (res)=> {
						if (res.confirm) {
							this.$ajax.updateaftersaleorder({Id:this.orderId,Status:'10'}).then(res=>{
								this.$apis.msg('取消成功')
								setTimeout(res=>{
									this.getDatas();
								},800)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 获取物流
			confirm(val){
				this.code=val[0].value
				this.logisticsInfo.expressCompanyName=val[0].label
			}
		},
		onLoad(e) {
			this.orderId=e.id
			this.getDatas();
			this.getRefundAddress()
			this.getdictionary()
		},
		onPullDownRefresh() {
			this.getDatas();
			this.getRefundAddress()
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.o-address {
		position: relative;
		border-radius: 20rpx;
		.address-icon{
			width: 70rpx;
			height: 70rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
		
	}
	.btn-sm-padding{
		padding: 10rpx 50rpx;
	}

	.o-goods {
		margin-top:10rpx;
		.o-goods-list {
			border-radius: 20rpx;
			.o-goods-merchant {
				padding: 30rpx 20rpx;
				border-bottom: 2rpx dotted #ddd;
			}

			.o-goods-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
			}
		}
	}
	.o-info {
		margin:10rpx 0 10rpx;
		border-radius: 20rpx;
		.o-info-title {
			border-bottom: 2rpx dotted #ddd;
		}
	}
	.o-footer {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		border-top: 1rpx solid #ddd;

		view {
			text-align: center;
			min-width: 152rpx;
			margin-right: 20rpx;
			height: 64rpx;
			line-height: 64rpx;
		}

		.order-btn-border {
			border-radius: 40rpx;
			background: #eee;
		}
	}

	.sp-dialog {
		width: 500rpx;

		.share-code {
			.share-code-item {
				margin: auto;
				width: 400rpx;
				height: 400rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.refund-content{
		width: 80%;
		margin: 0 auto;
		padding: 50rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		.input-box{
			width: 90%;
			border-bottom: 2rpx solid #E5E5E5;
			margin: 40rpx 0 80rpx;
			.input-placeholder{
				text-align: center;
			}
		}
	}
	.order-goods{
		// &:not(:last-child){
		// 	border-bottom: 2rpx solid #eee;
		// }
		.order-goods-img{
			width: 180rpx;
			height: 180rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
		.order-goods-detail{
			width: calc(100% - 214rpx);
			.order-goods-name{
				line-height: 1.5;
			}
		}
	}
</style>
